import { Component, ReactNode } from "react";
import { Input, View, Text, Image } from "@tarojs/components";
import { AtButton, AtList, AtListItem, AtNavBar } from "taro-ui";
import "./index.scss";
import Req from "../../utils/request";
import { getInfo } from "../../utils/auth";
import Taro from "@tarojs/taro";
import { isEmpty } from "../../utils/kit";
import i1 from "./images/i1.png";
import i6 from "./images/i6.png";
import i7 from "./images/i7.png";
export default class PayeeForm extends Component {
  state = {
    name: "",
    code: "",
    creditCode: "",
    bankList: [],
  };
  get isEditPage() {
    return !isEmpty(this.editId);
  }
  get editId() {
    const { router } = Taro.getCurrentInstance();
    return router?.params.id ?? "";
  }
  componentDidMount(): void {}
  componentDidShow() {
    this.initData();
  }
  initData = () => {
    if (this.isEditPage) {
      Taro.setNavigationBarTitle({
        title: "编辑供应商",
      });
      Req.get("/config/payee/" + this.editId)
        .then((r) => {
          if (r.code === 200) {
            console.log("rrr", r);
            this.setState({
              name: r.data.name,
              code: r.data.code,
              creditCode: r.data.creditCode,
              bankList: r.data?.bank ?? [],
            });
          }
        })
        .catch((e) => {});
    }
  };

  render(): ReactNode {
    const { name, code, creditCode, bankList } = this.state;
    return (
      <View className="payeeForm-container">
        <AtNavBar
          leftIconType="chevron-left"
          leftText="返回"
          color="#3051BE"
          onClickLeftIcon={() => {
            Taro.eventCenter.trigger("refreshData", {
              force: true,
            });
            Taro.navigateBack();
          }}
        >
          <View>{"供应商信息"}</View>
        </AtNavBar>
        <AtList className="payee-form-container mif-form">
          <AtListItem
            className="form-list-item no-arrow-space form-label-required"
            title="统一社会信用代码"
            note={
              <View className="code-search">
                <Input
                  value={creditCode}
                  onInput={(e) => {
                    this.setState({
                      creditCode: e.detail.value,
                    });
                  }}
                  placeholder="请输入"
                />
                <AtButton
                  onClick={() => {
                    Req.get("/company/tyc", {
                      creditCode,
                    })
                      .then((r) => {
                        this.setState({
                          name: r.title,
                        });
                      })
                      .catch((e) => {});
                  }}
                >
                  查询
                </AtButton>
              </View>
            }
          />
          <AtListItem
            title={"名称"}
            className="form-list-item no-active-effect-item form-label-required"
            note={
              <View>
                <Input
                  value={name}
                  onInput={(e) => {
                    this.setState({
                      name: e.detail.value,
                    });
                  }}
                  placeholder="请输入"
                />
              </View>
            }
          />
          {/* <AtListItem
            title={"账号"}
            className="form-list-item no-active-effect-item form-label-required"
            note={
              <View>
                <Input
                  value={code}
                  onInput={(e) => {
                    this.setState({
                      code: e.detail.value,
                    });
                  }}
                  placeholder="请输入"
                />
              </View>
            }
          /> */}

          <View className="flex-btns">
            {this.isEditPage && (
              <AtButton
                size="small"
                type="secondary"
                onClick={() => {
                  Taro.showModal({
                    title: "提示",
                    content: "确认删除？",
                    success: (res) => {
                      if (res.confirm) {
                        Req.post("/config/payee/" + this.editId)
                          .then((r) => {
                            if (r.code === 200) {
                              Taro.eventCenter.trigger("refreshData", {
                                force: true,
                              });
                              Taro.navigateBack();
                            }
                          })
                          .catch((e) => {});
                      }
                    },
                  });
                }}
              >
                删除
              </AtButton>
            )}
            <AtButton
              size="small"
              type="primary"
              onClick={() => {
                const user_info = getInfo();
                if (isEmpty(name)) {
                  Taro.showToast({
                    title: "名称不能为空！",
                    icon: "none",
                    duration: 2000,
                  });
                  return false;
                }
                if (isEmpty(creditCode)) {
                  Taro.showToast({
                    title: "信用代码不能为空！",
                    icon: "none",
                    duration: 2000,
                  });
                  return false;
                }
                if (this.editId) {
                  Req.post("/config/payee/edit", {
                    name,
                    creditCode,
                    companyId: user_info.company?.id,
                    id: this.editId,
                  })
                    .then((r) => {
                      if (r.code === 200) {
                        Taro.showToast({
                          title: "操作成功！",
                          icon: "none",
                          duration: 2000,
                        })
                        // Taro.eventCenter.trigger("refreshData", {
                        //   force: true,
                        // });
                        // Taro.navigateBack();
                      }
                    })
                    .catch((e) => {});
                } else {
                  Req.post("/config/payee/add", {
                    name,
                    creditCode,
                    companyId: user_info.company?.id,
                  })
                    .then((r) => {
                      if (r.code === 200) {
                        Taro.showToast({
                          title: "操作成功！",
                          icon: "none",
                          duration: 2000,
                        })
                        Taro.redirectTo({
                          url:"/pages/payee-form/index?id="+r.data.id
                        })
                        // Taro.eventCenter.trigger("refreshData", {
                        //   force: true,
                        // });
                        // Taro.navigateBack();
                      }
                    })
                    .catch((e) => {});
                }
              }}
            >
              提交
            </AtButton>
          </View>
          <View className="plan-title-box_outer">
            <View className="plan-title-box">
              <Text className="plan-title">账户信息</Text>
              <View
                onClick={() => {
                  Taro.navigateTo({
                    url: `/pages/account-form/index?payeeId=${this.editId}`,
                  });
                }}
                className="plan-add"
              >
                <Image mode="widthFix" src={i1} />
                <Text>新增</Text>
              </View>
            </View>
            <View className="plan-table">
              <View className="plan-tr">
                <View className="plan-th">开户行</View>
                <View className="plan-th">银行账号</View>
                <View className="plan-th"></View>
              </View>
              {bankList.map((item: any, index) => (
                <View key={index} className="plan-tr">
                  <View className="plan-td">{item.name}</View>
                  <View className="plan-td">{item.code}</View>
                  <View className="plan-td">
                    <Image
                      onClick={() => {
                        Taro.showModal({
                          title: "提示",
                          content: "确认删除？",
                          success: (res) => {
                            if (res.confirm) {
                              Req.post("/config/payee/bank/" + item.id).then(
                                (r) => {
                                  if (r.code === 200) {
                                    this.initData();
                                  }
                                }
                              );
                            }
                          },
                        });
                      }}
                      className="plan-btn"
                      src={i6}
                    />
                    <Image
                      onClick={() => {
                        Taro.navigateTo({
                          url: `/pages/account-form/index?payeeId=${this.editId}&lid=${item.id}&name=${item.name}&code=${item.code}`,
                        });
                      }}
                      className="plan-btn"
                      src={i7}
                    />
                  </View>
                </View>
              ))}
            </View>
          </View>
        </AtList>
      </View>
    );
  }
}
